<template>
  <u-row class="carousel-chart" @click.native.stop="onTableClick" style="background: white;">
    <u-col ref="title"
           class="title"
           v-if="title != null && title !== ''"
           :span="12"
           :style="{
		  color: options.title.textStyle.color,
		  'font-size': options.title.textStyle.fontSize + 'px',
		  'font-weight': options.title.bold ? 600 : undefined,
		  'text-align': options.title.left,
		  'font-style': options.title.italics ? 'italic' : undefined
	  }">
      {{ title }}
    </u-col>
    <u-col class="table" :span="12" v-if="ready && carouselData.length > 0">
      <u-swiper :list="carouselData"></u-swiper>
    </u-col>
  </u-row>
</template>

<script>
import chartMixins from './chartMixins.js';

export default {
  name: 'carouselChart',
  props: {
    // 透视表数据
    data: {
      type: [Object, Array]
    },
    // 透视表高度
    height: {
      type: String
    },
    // 透视表设置
    options: {
      type: Object
    },
    widget: {
      type: Object
    },
    imagePath: {
      type: Array
    },
    imageName: {
      type: Array
    }
  },
  mixins: [chartMixins],
  components: {},
  data() {
    return {
      ready: false,
      buildDataTimer: null,
      // 表格高度
      tableHeight: undefined,
      imagePathDefault: require('../../../static/home/swiperImg.png'),
    }
  },
  methods: {
    getFooterDataList() {
      return [
        this.footerDataList
      ]
    },
    onTableClick() {
      this.$emit('click');
    },
    // 构建透视表渲染信息
    buildTableInfo() {
      if (this.buildDataTimer != null) clearTimeout(this.buildDataTimer);
      this.ready = false;
      this.buildDataTimer = setTimeout(() => {
        this.tableGroupInfo = [];
        this.tableDataList = [];
        this.footerDataList = [];
        this.showFooter = false;
        this.buildDataTimer = null;
        this.ready = true;
      }, 50);
    },
    // 计算表格高度
    calcTableHeight() {
      this.tableHeight = this.height;
    },
    getColumnName(columnList) {
      if (!columnList || columnList.length === 0) return '';
      let columnInfo = columnList[columnList.length - 1];
      if (columnInfo) {
        return columnInfo.columnName
      } else {
        return '';
      }
    },
    getImageColumnValue(data, columnList) {
      if (columnList && columnList.length > 0) {
        return this.getColumnValue(data, columnList[0].columnName)
      }
      return undefined;
    }
  },
  computed: {
    title() {
      if (this.options == null || this.options.title == null || !this.options.title.show) return undefined;
      return this.options ? this.options.title.text : undefined;
    },
    rowConfig() {
      return {
        height: this.options && this.options.cellRowHeight
      }
    },
    carouseCount() {
      if (Array.isArray(this.data)) {
        return (this.options && this.data.length >= this.options.pageParam.pageSize) ? this.options.pageParam
            .pageSize : this.data.length;
      } else {
        return 1;
      }
    },
    carouselData() {
      let temp = [];
      if (Array.isArray(this.data) && this.data.length > 0) {
        this.data.filter((dataItem, index) => {
          if (index < this.carouseCount) {
            // 图片字段为数组，把数组展开
            temp.push({
              image: this.getImageColumnValue(dataItem, this.imagePath) ||  this.imagePathDefault,
              title: this.getImageColumnValue(dataItem, this.imageName)
            })
          }
        })
      } else {
        if (this.getImageColumnValue(this.data, this.imagePath) && this.getImageColumnValue(this.data, this.imageName)) {
          temp.push({
            image: this.getImageColumnValue(this.data, this.imagePath),
            title: this.getImageColumnValue(this.data, this.imageName)
          })
        }
      }
      return temp;

    }

  },
  watch: {

    data: {
      handler() {
        this.buildTableInfo();
      },
      immediate: true
    },
    options: {
      handler() {
        this.buildTableInfo();
      },
      deep: true,
      immediate: true
    },
    height: {
      handler(newValue) {
        this.$nextTick(() => {
          this.calcTableHeight();
        });
      },
      immediate: true
    }
  }
}
</script>

<style scoped>
/*
.carousel-chart {
  display: flex;
  flex-direction: column;
}
*/
.carousel-chart .title {
  padding: 20rpx 4rpx;
  flex-grow: 0;
  flex-shrink: 0;
}

.carousel-chart .carousel-item-wrapper {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}

.carousel-chart .carousel-item-image {
  display: inline-block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.carousel-chart .carousel-item-text {
  display: inline-flex;
  position: absolute;
  top: 0px;
  bottom: 0px;
  left: 0px;
  right: 0px;
  width: 100%;
  align-items: flex-end;
}

.carousel-chart .carousel-item-text div {
  display: inline-block;
  width: 100%;
  min-height: 60rpx;
  padding: 16rpx 20rpx;
}
</style>
